<template>
  <div>
    <el-table v-loading="loading" :data="skuList" border>
      <el-table-column label="序号" type="index" align="center" width="80px" />
      <el-table-column label="名称" prop="skuName" />
      <el-table-column label="描述" prop="skuDesc" />
      <el-table-column label="默认图片">
        <template v-slot="{row}">
          <el-image style="width: 100px; height: 100px" :src="row.skuDefaultImg" />
        </template>
      </el-table-column>
      <el-table-column label="重量" prop="weight" />
      <el-table-column label="价格" prop="price" />
      <el-table-column label="操作" width="280px">
        <template v-slot="{row}">
          <el-tooltip v-if="row.isSale===0" content="上架" placement="top">
            <el-button type="success" icon="el-icon-top" size="mini" @click="skuOnSale(row)" />
          </el-tooltip>
          <el-tooltip v-else content="下架" placement="top">
            <el-button type="danger" icon="el-icon-bottom" size="mini" @click="skuCancelSale(row)" />
          </el-tooltip>
          <el-tooltip content="更新SKU" placement="top">
            <el-button type="warning" icon="el-icon-edit" size="mini" @click="editSkuInfo(row)" />
          </el-tooltip>
          <el-tooltip content="查看SKU" placement="top" style="margin-right:10px">

            <el-button type="info" icon="el-icon-info" size="mini" @click="showSkuInfo(row)" />
          </el-tooltip>
          <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info" icon-color="red" title="您真的要删除此项Sku吗？" @onConfirm="deleteSkuInfo(row,$index)">
            <el-tooltip slot="reference" content="删除Sku" placement="top">
              <el-button type="danger" icon="el-icon-delete" size="mini" />
            </el-tooltip>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination :current-page="page" align="center" :page-sizes="[3,5,10,20]" :page-size="limit" layout=" prev, pager, next, jumper,->,sizes,total" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    <!-- 抽屉效果 -->
    <el-drawer size="45%" title="SKU信息查看" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
      <el-row :gutter="10">
        <el-col :span="7">
          <div class="grid-content bg-purple">SKU名称</div>
        </el-col>
        <el-col :span="17">
          <div class="grid-content bg-purple">{{ skuInfo.skuName }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="7">
          <div class="grid-content bg-purple">SKU描述</div>
        </el-col>
        <el-col :span="17">
          <div class="grid-content bg-purple">{{ skuInfo.skuDesc }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="7">
          <div class="grid-content bg-purple">SKU价格</div>
        </el-col>
        <el-col :span="17">
          <div class="grid-content bg-purple">{{ skuInfo.price }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="7">
          <div class="grid-content bg-purple">平台属性</div>
        </el-col>
        <el-col :span="17">
          <el-tag v-for="attrValue in skuInfo.skuAttrValueList" :key="attrValue.id" type="success">{{ attrValue.valueName }}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="7">
          <div class="grid-content bg-purple">图片列表</div>
        </el-col>
        <el-col :span="12" :offset="3">
          <el-carousel height="200px" style="text-align:center">
            <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item.id">
              <el-image style="width: 250px; height: 250px" :src="item.imgUrl" />
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
import { reqDeleteSku, reqGetAllSkuList, reqGetOneSkuInfo, reqSkuCancelSale, reqSkuOnSale } from '@/api/product/sku'
export default {
  name: 'SkuList',
  data() {
    return {
      loading: false,
      page: 1,
      limit: 5,
      total: 1,
      skuList: [],
      skuInfo: {},
      drawer: false,
      direction: 'rtl'
    }
  },
  mounted() {
    this.getSkuList()
  },
  methods: {
    // 0. 获取sku列表
    async getSkuList() {
      const { page, limit } = this
      this.loading = true
      const result = await reqGetAllSkuList({ page, limit })
      if (result.code === 200) {
        this.$message({
          type: 'success',
          message: '获取Sku列表成功'
        })
        this.skuList = result.data.records
        this.total = result.data.total
        this.loading = false
      } else {
        this.$message({
          type: 'error',
          message: '获取Sku列表失败'
        })
      }
    },
    // 1. 上架
    async skuOnSale(row) {
      const result = await reqSkuOnSale(row.id)
      if (result.code === 200) {
        this.$message.success('商品上架成功...')
        // this.getSkuList() // 重新刷新页面
        this.$set(row, 'isSale', 1)
      } else {
        this.$message.success('商品上架失败..')
      }
    },
    // 2. 下架
    async skuCancelSale(row) {
      const result = await reqSkuCancelSale(row.id)
      if (result.code === 200) {
        this.$message.success('商品下架成功...')
        // this.getSkuList() // 重新刷新页面

        // row.isSale = 0
        this.$set(row, 'isSale', 0)
      } else {
        this.$message.success('商品下架失败..')
      }
    },
    // 3. 更新sku
    editSkuInfo() {},
    // 4. 删除sku
    async deleteSkuInfo(row) {
      const result = await reqDeleteSku(row.id)
      if (result.code === 200) {
        this.$message.success('删除sku成功')
        this.getSkuList()
      } else {
        this.$message.success('删除sku失败')
      }
    },
    // 5. 查看skuInfo信息
    async showSkuInfo(skuInfo) {
      const result = await reqGetOneSkuInfo(skuInfo.id)
      if (result.code === 200) {
        this.drawer = true
        this.skuInfo = result.data
      } else {
        this.$message.error('获取Sku对象数据失败...')
      }
    },
    // 以下两个方法是分页相关
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.limit = val
      this.page = 1
      this.getSkuList()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.page = val
      this.getSkuList()
    },
    // 抽屉中的事件
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    }
  }
}

// ctrl + shift +d  复制当前行到下一行
</script>

<style lang="scss">
.el-row {
  margin-bottom: 20px;
  > :first-child {
    text-align: right;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
// .bg-purple {
//   background: #d3dce6;
// }
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
// .el-carousel__item h3 {
//   color: #475669;
//   font-size: 14px;
//   opacity: 0.75;
//   line-height: 150px;
//   margin: 0;
// }

// .el-carousel__item:nth-child(2n) {
//   background-color: #99a9bf;
// }

// .el-carousel__item:nth-child(2n + 1) {
//   background-color: #d3dce6;
// }
</style>
